<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>标题</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel='stylesheet' href='../css/fyz.public.style.css' />
<script type='text/javascript' src='../js/jquery-1.8.3.min.js'></script>
</head>
<body>
<style type="text/css">
ul.Accordion{width:380px; margin:50px auto; border:1px solid #eee;}
ul.Accordion li.con div.Accordion div{width:100%; height:210px; }
ul.Accordion li.hover h3{display:none;}
ul.Accordion li.hover div.Accordion{display:block;}
div.Accordion{display:none;}
</style>
<ul class="Accordion">
	<li class="con hover">
		<h3>我是第一个文字标题</h3>
		<div class="Accordion"><div style='background:red;'></div></div>
	</li>
	<li class="con">
		<h3>我是第二个文字标题</h3>
		<div class="Accordion"><div style='background:orange;'></div></div>
	</li>
	<li class="con">
		<h3>我是第二个文字标题</h3>
		<div class="Accordion"><div style='background:yellow;'></div></div>
	</li>
</ul>
<script type="text/javascript">
(function($){
    $.fn.extend({
        'Accordion':function(options){
            var opts = $.extend({},Accordion_defaluts,options);
            var $this  = $(this);
			var $thisAll = $(this).find('*');
			opts.size = $this.find('li.con').size();
			if(opts.size>1){
				for(var i=0; i<opts.size; ++i){
					Accordionclass = 'Accordionclass' + i;
					$this.find('li.con').eq(i).addClass(Accordionclass);
					$this.find('li.con').eq(i).attr('index',i);
				};
				for(var j=0; j<opts.size; ++j){
					$this.find('li.Accordionclass'+j).click(function(){
						opts.index = $(this).attr('index');
						partcom();
					});
				};
				if(opts.autoplay){
					function autoplay(){
						clearInterval(opts.timer);
						opts.timer = setInterval(function(){
							opts.index++;
							if(opts.index == opts.size){opts.index = 0;};
							partcom();
						},opts.setInterValTime);
					};
					autoplay();			
					function clearIntervalFun(clearIntervalObj){
						$(clearIntervalObj).live('mouseover',function(){
							clearInterval(opts.timer);
						});
						$(clearIntervalObj).live('mouseout',function(){
							autoplay();
						});
					};
					clearIntervalFun($this);
					clearIntervalFun($thisAll);
					function partcom(){
						$this.find('li.Accordionclass'+opts.index).find('h3').stop(true,true).slideUp();
						$this.find('li.Accordionclass'+opts.index).find('div.Accordion').stop(true,true).slideDown();
						$this.find('li.Accordionclass'+opts.index).siblings('li.con').find('h3').stop(true,true).slideDown();
						$this.find('li.Accordionclass'+opts.index).siblings('li.con').find('div.Accordion').stop(true,true).slideUp();
					};
				};
			};
        }
    });
    var Accordion_defaluts = {
		trigger:'click',
		effect:'slide',
		autoplay:true,
		size:'',
		setInterValTime:1000,
		index:0,
		timer:null,
		Accordionclass:''
	};
}(window.jQuery));
$('ul.Accordion').Accordion({
	autoplay:true,
	setInterValTime:3000,
	trigger:'click',//click or hover 默认click
	effect:'slide'//slide or show 默认slide
});
</script>
</body>
</html>